@import '../../../core/index';

.mobile-content-bar-content-wrapper {
    overflow: hidden;
    width: @toolBar-pc-width;
    //height: 0;
    opacity: 1;
    height: 70/@remScale;
    visibility: visible;
    //transition: opacity .1s .4s linear, width .1s .1s linear, height .2s .3s linear, visibility .1s .2s linear;
    position: relative;

    .item-wrapper {
        height: @toolBar-pc-height;
        text-align: center;
        color: @white;
        background: rgba(0, 0, 0, 0.8);
        position: relative;
        cursor: pointer;
        display: flex;
        padding: 0 20/@remScale;
        align-items: center;
        font-size: 15/@remScale;
        .icon-wrapper {
            flex: 0 0 30/@remScale;
        }
        .text {
            flex: 1;
        }
        &.gray {
            color: @black-auxiliary;
        }
        //.icon {
        //    margin-right: 8/@remScale;
        //}
        .line {
            position: absolute;
            bottom: 0;
            left: 20/@remScale;
            right: 20/@remScale;
            height: 1/@remScale;
            background-color: rgba(255, 255, 255, .2);
        }
        &:hover {
            background: rgba(29, 176, 231, 0.8);
        }
        @media (max-width: @max1) {
            height: @toolBar-phone-height;
            padding: 0 5/@remScale;
            background: rgba(29, 176, 231, 0.8);
            .icon-wrapper {
                flex: 0 0 25/@remScale;
            }
        }
    }
    &.hide-content-bar-top-content {
        opacity: 0;
        width: 0;
        height: 0;
        //visibility: hidden;
        // transition: opacity .3s .4s linear, height .2s linear, visibility .2s .3s linear;
    }
    @media (max-width: @max1) {
        border-top-left-radius: 10/@remScale;
        width: @toolBar-phone-width;
    }
}


